<template>
	<view  class="header">
			<!-- 分类列表 -->
		<view class="selectren">
			<view class="aaa" v-for="(row, index) in categoryList" :key="index"
			 @tap="toCategory(row.id)">
				<view class="name">{{row.name}}</view>
			
					<view class="jiantou"><image class="jiantou1" src="../../static/images/attendance/jiantou.png"></image></view>
					<view class="cadid">院内就诊卡：{{row.card}}</view>
			
			</view>

		</view>
<view class="addren"  @tap="takein">
	  <view class="add"><image class="add1" src="../../static/images/attendance/tianjia.png"></image></view>
	 <view class="jiantou"><image class="jiantou1" src="../../static/images/attendance/jiantou.png"></image></view>
	  <view class="addjiuzhenren">添加就诊人</view>
	  <view class="ren">还可以添加{{num}}人</view>
</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	import mm from '../../api/member.js'
	export default {
		data() {
			return {
				
				categoryList:[],
				num:0
				
			}
		},
		computed: {
			...mapState(['member']),
		
		},
		
		onShow() {
			this.getjiuzhenren();
		},
		methods: {
		// 查询医院列表方法
		
			getjiuzhenren(){
				var data = {
					info: JSON.stringify({
				
						"openid": mm.openid
					})
				};
				this.$api.getjiuzhenren(data).then(res => {
				console.log('查到的数据:' + JSON.stringify(res));
				for (var i = 0; i < res.length; i++) {
					if(res[i].card!=null){
						this.categoryList[i]=res[i]
					}
					
				
				}
				 
			
				
				this.num=8-this.categoryList.length;
			
				
				
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
					
				})
			 },
			toCategory(id) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/addjiuzhenren/bingrenxiangqing?id="+id
				})
			},
			takein() {
			
				uni.navigateTo({
					url: '/pages/addjiuzhenren/add'
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
	
	.addren{
		position: relative;
			margin-top: -10rpx;
			margin-left: 25rpx;
		
			width: 700rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			height: 170rpx;
			.addjiuzhenren{
				margin-left: 150rpx;
				margin-top: -70rpx;
				font-size: 35rpx;
			}
			.ren{	margin-left: 150rpx;
				color: #9A9A9A;
				font-size: 30rpx;
				margin-top: 10rpx;
			}
			.add{
				
				margin-left: 10rpx;
				margin-top:30rpx;
				display: flex;
				.add1{
					margin-top: 35rpx;
					margin-left: 20rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}
			.jiantou{
				.jiantou1{
					width: 30rpx;
					height: 30rpx;
					
				}
					
				margin-left: 650rpx;
				margin-top:-60rpx;
				display: flex;
			}
	}
.selectren {
	margin-top: 25rpx;
    .aaa{
		position: relative;
			margin-top: 20rpx;
			margin-left: 25rpx;

			width: 700rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			height: 170rpx;
			.jiantou{
				.jiantou1{
					width: 30rpx;
					height: 30rpx;
					
				}
		
				margin-left: 650rpx;
				margin-top:-10rpx;
				display: flex;
			}
			.name {
				display: flex;
				padding-top: 35rpx;
				position: relative;
				margin-left: 20rpx;
				font-size: 35rpx;
			}
			.cadid{
						position: relative;
				display: flex;
			
				font-size: 30rpx;
				margin-left: 20rpx;
			color: #9A9A9A;
			}
			
}

	}
</style>